<template>
  <div class="clound">
    <div class="progress"></div>
    <div class="tip">
      <span>{{ $t('institutionSetting.jigou21') }}</span>
      <span>{{ capacityUsedStr }}</span>
      <span>/{{ capacityTotalStr }}</span>
    </div>
    <div class="bottom">
      <el-button round type="primary" size="small" @click="submitHandle">{{
        $t('institutionSetting.jigou22')
      }}</el-button>
    </div>
    <el-dialog :title="$t('add.add183')" :visible.sync="dialogVisible" width="360px" :close-on-click-modal="false">
      <span>{{ $t('add.add038') }}</span>
      <!-- <el-input v-model="rongliang" type="number" :placeholder="$t('add.add148')" style="width: 260px;">
                <template slot="append">GB</template>
            </el-input> -->
      <span slot="footer" class="dialog-footer">
        <el-button :size="optionButtonSize" @click="dialogVisible = false">{{
          $t('add.add203')
        }}</el-button>
        <el-button :size="optionButtonSize" type="primary" @click="dialogVisible = false">{{
          $t('add.add142')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BLZMasterCloudspace',

  data() {
    return {
      dialogVisible: false,
      rongliang: null,
      capacityUsedStr: '', // 已使用
      capacityTotalStr: '', // 总容量
    };
  },

  mounted() {
    this.getRongLiang();
  },

  methods: {
    getRongLiang() {
      this.$http
        .get(`/sys/oss/list?id=${localStorage.getItem('user_jg_id')}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.capacityUsedStr = res.data.list[0].capacityUsedStr;
            this.capacityTotalStr = res.data.list[0].capacityTotalStr;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    submitHandle() {
      this.dialogVisible = true;
      this.rongliang = null;
    },
    submit() {
      this.$http
        .post(
          `/sys/oss/expansion?deptId=${localStorage.getItem('user_jg_id')}&size=${this.rongliang}`,
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success('扩容成功');
            this.dialogVisible = false;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.clound {
  width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .progress {
    width: 160px;
    height: 160px;
  }

  .tip {
    margin-top: 18px;

    span {
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #333333;
    }

    span:nth-of-type(2) {
      font-size: 27px;
      font-weight: 500;
      line-height: 39px;
      color: #003e67;
    }
  }

  .bottom {
    margin-top: 18px;
  }

  margin-bottom: 200px;
}
</style>
